import React,{ Component } from 'react';
import { Button, Icon, Tabs, Drawer, Row} from 'antd';
import store from '../redux/index';
import './css/header.css';

const { TabPane } = Tabs;

class Appheader extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        this.toggleCollapsed = this.toggleCollapsed.bind(this);
        this.toggleClosed = this.toggleClosed.bind(this);
        this.storeChange = this.storeChange.bind(this);
        this.onChangeTab = this.onChangeTab.bind(this);
        this.toggleFullScreen = this.toggleFullScreen.bind(this);
        store.subscribe(this.storeChange);
    }

    toggleCollapsed = () =>{
        const action = {
            type:'change_collapse',
            payload:this.state.collapsed,
        }
        store.dispatch(action)
    }

    toggleFullScreen = () => {
        const action = {
            type:'change_screen',
            payload:this.state.isFullScreen,
        }
        store.dispatch(action)
        
    }

    toggleClosed = () => {
        const action = {
            type:'change_close',
            payload:this.state.visible,
        }
        store.dispatch(action)
    }

    storeChange(){
        this.setState(store.getState())
    }

    onEdit = (targetKey,action) => {
        
        this[action](targetKey);
    }

    onChangeTab = activeKey => {
        const action = {
            type:'change_active_key',
            payload:activeKey
        }
        store.dispatch(action)
    }

    addPane = () => {
        const action = {
            type:'add_Pane',
            content:'New Tab Pane',
        }
        store.dispatch(action);
    }

    remove = targetKey => {

        const action = {
            type:'delete_Pane',
            payload:targetKey,
        }
        store.dispatch(action)
    }

    render() {
        return (
            <div>
                <Row>
                    <div style={{display:'flex',height:'50px'}}>
                        <div>
                            <Tabs>
                                <TabPane 
                                    key="1"  
                                    tab={
                                        <span>
                                            <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.toggleCollapsed}/>
                                        </span>
                                    }
                                    >
                                </TabPane>
                                <TabPane
                                    key="2"
                                    tab={
                                        <span>
                                            <Icon type="reload" />
                                        </span>
                                    }>
                                </TabPane>
                                
                            </Tabs>
                        </div>
                    
                        <div style={{position:'absolute',right:'0px'}}>
                            <Tabs>
                                <TabPane
                                    key="3"
                                    tab={
                                        <span>
                                            <Icon type={this.state.isFullScreen?"fullscreen-exit":"fullscreen"} onClick={this.toggleFullScreen}/>
                                        </span>
                                    }>
                                </TabPane>
                                <TabPane
                                    key="4"
                                    tab={
                                        <span>
                                            <Icon type="more" onClick={this.toggleClosed}/>
                                        </span>
                                    }
                                    
                                    >
                                </TabPane>
                            </Tabs>
                        </div>

                        <div>
                            <Drawer
                                title="更多设置"
                                placement="right"
                                closable={false}
                                onClose={this.toggleClosed}
                                visible={this.state.visible}>

                            </Drawer>
                        </div>
                    </div>
                </Row>

                <Row>
                    <div>
                        <Tabs
                            hideAdd
                            onChange={this.onChangeTab}
                            activeKey={this.state.activeKey}
                            type="editable-card"
                            onEdit={this.onEdit}
                        >
                            <TabPane 
                                tab={
                                    <span>
                                        <Icon type="home" />
                                    </span>
                                } 
                                key="0"
                                closable={false}
                                >
                                主页
                            </TabPane>
                            {this.state.panes.map(pane => (
                                    <TabPane 
                                        tab={pane.title} 
                                        key={pane.key}
                                        closable={pane.closable}
                                        >
                                        {pane.content}
                                    </TabPane>
                                )
                            )}
                        </Tabs>
                    </div>
                    {/* <div style={{ marginLeft: 16 }}>
                        <Button onClick={this.addPane}>ADD</Button>
                    </div> */}
                </Row>
            </div>
            
        )
    }
}

export default Appheader;